import React from "react";
import { View, Text, Modal, StyleSheet, TouchableWithoutFeedback } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Image } from "expo-image";
import shareWechatIcon from "@/assets/images/releaseImg/shareWechatIcon.png";

const ShareComponent = function ({ visible, close }) {
    return (
        <Modal
            style={styles.ModalContainer}
            animationType="fade"
            transparent={true}
            visible={visible}
        >
            <GestureHandlerRootView style={styles.shareModalContainer} onPress={close}>
                <TouchableWithoutFeedback>
                    <View style={styles.shareModalWrap}>
                        <View style={styles.shareHeader}>
                            <View style={styles.headerLeft}></View>
                            <Text style={styles.headerTitle}>分享到</Text>
                            <View style={styles.headerLeft}></View>
                        </View>

                        <View style={styles.iconContainer}>
                            <TouchableWithoutFeedback
                                onPress={(event) => {
                                    event.stopPropagation(); // 阻止事件传播
                                    alert("微信图标被点击");
                                }}
                            >
                                <View style={styles.iconList}>
                                    <View style={styles.shareIcon}>
                                        <Image source={shareWechatIcon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                    <View style={styles.shareText}>
                                        <Text style={styles.shareTextContent}>微信</Text>
                                    </View>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>

                        <TouchableWithoutFeedback onPress={close}>
                            <View style={styles.cancel}>
                                <Text style={styles.cancelText}>取消</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </TouchableWithoutFeedback>
            </GestureHandlerRootView>
        </Modal>
    );
};

const styles = StyleSheet.create({
    ModalContainer: {
        flex: 1,
    },
    shareModalContainer: {
        flex: 1,
        alignItems: "center",
        backgroundColor: "rgba(0,0,0,0.5)", // 背景遮罩
    },
    shareModalWrap: {
        position: "absolute",
        backgroundColor: "#fff",
        bottom: 0,
        width: "100%",
        paddingBottom: 42,
        paddingTop: 18,
    },
    shareHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
    },
    headerLeft: {
        width: 24,
        height: 1,
        backgroundColor: "#676978",
    },
    headerTitle: {
        fontSize: 12,
        color: "#676978",
        marginHorizontal: 12,
    },
    shareIcon: {
        width: 48,
        height: 48,
        margin: "auto",
    },
    iconList: {
        width: 60,
    },
    shareText: {
        marginTop: 10,
        textAlign: "center",
    },
    shareTextContent: {
        textAlign: "center",
        color: "#676978",
        margin: "auto",
    },
    iconContainer: {
        marginTop: 20,
        marginBottom: 46,
        marginLeft: 12,
    },
    cancel: {},
    cancelText: {
        fontSize: 16,
        color: "#2A2B30",
        textAlign: "center",
    },
});

export default ShareComponent;
